import React, { Component } from 'react';
import { View, StyleSheet, Dimensions, Platform, Alert, DeviceEventEmitter } from 'react-native'
import { Container, Content, List, ListItem, Text, Body, Thumbnail, Spinner, Icon, } from 'native-base'
import Collapsible from 'react-native-collapsible';
import { connect } from 'react-redux';
import interaction from '../../net/interaction.js';
import URL from '../../net/url.js';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
var out = {};
var i_id = null; var j_id = null;
var interaction_course_id = null;
var InteractionCourseId_OnlineClass_ID = null;
var iconscolors = [
    {
        'colors': ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white',]
    }, {
        'colors': ['white', 'white',]
    }, {
        'colors': []
    }, {
        'colors': ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white',]
    }, {
        'colors': []
    }, {
        'colors': ['white', 'white', 'white',]
    },
];
class interact_class extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: -1,
            InteractionCourseID: 2,
            content: null,
            text: '章节列表',
            sign: null,
            IconColor: null
        }
    }
    render() {
        const { navigate } = this.props.navigation;
        if (!this.state.content) {
            return this.renderLoadingView();
        }
        else {
            return (
                <Container  >
                    <Content>
                        <ListItem itemDivider>
                            <Icon name='ios-paper-outline' style={{color:'#28AB91'}}/>
                            <Body>
                                <Text>{this.state.text}</Text>
                            </Body>
                        </ListItem>
                        {this.renderContent(this.state.content)}
                    </Content>
                </Container>
            );
        }

    }
    //rn的生命周期，初始化的时候会执行
    async componentWillMount() {
        this.setState({ IconColor: iconscolors });
        const { interaction_course } = this.props;
        const { InteractionCourseId_OnlineClassID } = this.props;
        if (InteractionCourseId_OnlineClass_ID != InteractionCourseId_OnlineClassID.OnlineClassID) {
            iconscolors = [
                {
                    'colors': ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white',]
                }, {
                    'colors': ['white', 'white',]
                }, {
                    'colors': []
                }, {
                    'colors': ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white', 'white',]
                }, {
                    'colors': []
                }, {
                    'colors': ['white', 'white', 'white',]
                },
            ];
            this.setState({ IconColor: iconscolors });
             i_id = null;  j_id = null;
        }
        InteractionCourseId_OnlineClass_ID = InteractionCourseId_OnlineClassID.OnlineClassID;
        let interactionCourseID;
        if (this.props.navigation.state.params.type == 'course') {
            console.log('课程-交互');
            interactionCourseID = InteractionCourseId_OnlineClassID.interactionCourseID;
            console.log('课程-交互' + interactionCourseID);
        }
        else {
            console.log('发现-交互');
            console.log('发现-交互');
            console.log(interaction_course.id);
            interactionCourseID = interaction_course.id;
        }
        let Interaction = new interaction();
        let CourseSubjectList = await Interaction.getCourseSubjectList(interactionCourseID);
        if (CourseSubjectList == undefined) {
            this.setState({ content: 'noCourseSubjectList', });
        }
        else { this.setState({ content: CourseSubjectList, }); }
    }
    componentWillUnmount() {
        // 移除
        this.pushing_icon.remove();
        this.pushed_icon.remove();

    }
    //加载等待的view
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    //加载下拉下单组件上
    renderContent(l) {
        if (l == 'noCourseSubjectList') {
            return (
                <ListItem style={StyleSheet.flatten(styles.view)}>
                    <Text style={StyleSheet.flatten(styles.text_style)}>暂无题目信息</Text>
                </ListItem>
            )
        }
        return l.map((v, i) => {
            return (
                <View key={i} style={StyleSheet.flatten(styles.view)}>
                    <ListItem button onPress={() => { this.setState(this.state.selectedItem != i ? { selectedItem: i } : { selectedItem: -1 }); }} style={StyleSheet.flatten(styles.view)}>
                        <Body>
                            <Text style={StyleSheet.flatten(styles.text_style)}>{v.chapterTitle}</Text>
                            {console.log(v.chapterTitle)}
                            {/*{console.log(v.subjectInfo[0].stemInfo)}*/}
                            {console.log(v.subjectInfo)}
                        </Body>
                        <Thumbnail square size={20} style={StyleSheet.flatten(styles.nextIcon)} source={require('../../images/back.png')} />
                    </ListItem>
                    <Collapsible collapsed={this.state.selectedItem === i ? false : true}>
                        <List style={StyleSheet.flatten(styles.List)}>
                            {v.subjectInfo.map((v, j) => {
                                this.pushing_icon = DeviceEventEmitter.addListener('pushing_icon_color', (events) => {
                                    if (v.subjectID == events[0].subjectId) {
                                        iconscolors = this.state.IconColor;
                                        if (i_id != null) { iconscolors[i_id].colors[j_id] = '#D9534F'; }
                                        iconscolors[events[0].menu_id].colors[j] = '#F0AD4E';
                                        console.log("温馨提醒,蓝色:", iconscolors[events[0].menu_id].colors[j]);
                                        this.setState({ IconColor: iconscolors });
                                        i_id = events[0].menu_id;
                                        j_id = j;
                                    }
                                });
                                this.pushed_icon = DeviceEventEmitter.addListener('pushed_icon_color', (events) => {
                                    console.log("events", events);
                                    if (v.subjectID == events[0].subjectId) {
                                        iconscolors = this.state.IconColor;
                                        iconscolors[events[0].menu_id].colors[j] = '#D9534F';
                                        this.setState({ IconColor: iconscolors });
                                    }
                                });
                                return (
                                    <ListItem key={j} onPress={() => { this.opress(v, i); }}>
                                        <Icon name="checkmark" style={{ color: this.state.IconColor[i].colors[j] }} />
                                        <Text style={StyleSheet.flatten(styles.text_style2)}>{v.stemInfo}</Text>
                                    </ListItem>
                                );
                            })}
                        </List>
                    </Collapsible>
                </View>
            );
        })
    }
    opress(v, i) {
        const { navigate } = this.props.navigation;
        const { Subject } = this.props;
        const { Subject_course } = this.props;
        let navigate_type = this.props.navigation.state.params.type == 'course' ? 'course' : '';
        let navigate_action = this.props.navigation.state.params.type == 'course' ? 'AnswerQuestionStatisticsTeacher_Course' : 'AnswerQuestionStatisticsTeacher';
        let redux_type = this.props.navigation.state.params.type == 'course' ? 'GetSubject_course' : 'GetSubject';
        Subject_course({
            type: redux_type,
            payload: {
                subjectId: v.subjectID,
                subjectTitle: v.stemInfo,
                subjectType: v.subjectType,
                menu_id: i,
            }
        });
        this.props.navigation.dispatch(navigate_action);
        navigate(navigate_action, { title: v.chapterTitle, type: navigate_type });
    }
}
const styles = StyleSheet.create({
    view: {
        marginRight: 0,
        marginLeft: 0,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    ListItem: {
        paddingLeft: 20,
    },
    Container: {
        marginTop: 20,
    },
    List: {
        paddingLeft: 30,
    },
    text_style: {
        //fontFamily:'微软雅黑',
        fontSize: 15,
        color: '#353535',
        paddingLeft: 15,
    },
    text_style2: {
        //fontFamily:'微软雅黑',
        fontSize: 14,
        // color: '#28AB91',
        paddingLeft: 15,
    },
    nextIcon: {
        width: 20,
        height: 20,
        marginRight: 20,
        opacity: 0.6,
    },

});
function mapStateToProps(state) {
    return {
        interaction_course: state.intercation.interaction_course,
        InteractionCourseId_OnlineClassID: state.courseInteract_Get_InteractionCourseId_OnlineClassID.InteractionCourseId_OnlineClassID,
        login_info: state.login.login_info
    }
}

function mapDispatchToProps(dispatch) {
    return {
        Subject_course: (state) => dispatch(state),
        Subject: (state) => dispatch(state),
    }

}

const InteractClass = connect(
    mapStateToProps,
    mapDispatchToProps
)(interact_class)

export default InteractClass;
